<template>
	<van-nav-bar title="商品详情" />
	<van-tree-select style="height:90%" v-model:active-id="activeId" v-model:main-active-index="activeIndex"
	 :items="categoryList"
	 @click-nav="bindNav">
		<template #content>
			<van-card
			    v-for="good in goodsList"
				:num="good.num"
				:price="good.price"
				:desc="good.name"
				:title="good.name"
				:thumb="good.url"
			/>
		</template>
	</van-tree-select>
</template>

<script setup>
import axios from 'axios';
import { onMounted, ref } from 'vue'
const activeId = ref(1)
const activeIndex = ref(0)

const categoryList = ref([])
const goodsList = ref([])

const getCategoryList = ()=>{
	axios({
		url:'http://localhost:3000/categorys',
		method:'GET'
	}).then(res=>{
		const data = res.data 
		if(data.code == 1){
			categoryList.value = data.list 

			//重构组件需要的数据
			categoryList.value = categoryList.value.map(item=>{
				return {...item,text:item.name}
			})
			const categoryID = categoryList.value[0].id
			console.log('categoryID :',categoryID);
			
			//获取商品列表
			getGoodsListByCategoryId(categoryID)
		}
	})
}

/**
 * 根据商品分类获取商品列表
 */
const getGoodsListByCategoryId = (categoryId)=>{
	axios({
		url:'http://localhost:3000/category/goods/'+categoryId,
		method:'GET'
	}).then(res=>{
		const data = res.data
		if(data.code == 1){
			 goodsList.value = data.list
		}
	})
}

/**
 * 分类事件
 */
const bindNav = (index)=>{
	console.log('index ',index);
	const categoryID = categoryList.value[index].id
	getGoodsListByCategoryId(categoryID)
}

onMounted(()=>{
	getCategoryList()
})


</script>

<style lang="scss" scoped></style>
